<%@ page contentType="text/html; charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登陆页</title>
    <style>
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
        dl, dt, dd, ul, ol, li,
        pre,
        fieldset, lengend, button, input, textarea,
        th, td {
            margin: 0;
            padding: 0;
        }

        body,
        button, input, select, textarea {
            font: 12px/1 "lucida Grande",Verdana,"Microsoft YaHei";
        }
        ul, ol { list-style: none; }
        a { text-decoration: none; }
        a:hover { text-decoration: underline; }
        .login-block{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url("images/background.jpg") no-repeat 80%;
            background-size: cover;
        }
        *{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .login{
            position: absolute;
            width: 345px;
            height: 360px;
            right:200px;
            top: 50%;
            margin-top: -180px;
            border-radius: 5px;
            overflow: hidden;
            padding: 20px 30px;
            background-color: rgba(255,255,255,.5);
            -webkit-box-shadow: -1px -1px 5px rgba(229,231,234,.6);
            -moz-box-shadow: -1px -1px 5px rgba(229,231,234,.6);
            box-shadow: -1px -1px 5px rgba(229,231,234,.6);
        }
        .login .header{height:50px;line-height:50px;color:#f9a605;font-size:20px;font-weight:700;border-bottom: 1px solid #dedfdf;}
        .login .tips{display:block;position:absolute;height:40px;line-height:40px;color:rgb(255,0,0);}
        .login-form{margin-top:40px;}
        .login .login-list{position: relative;font-size:15px;}
        .login-list input{width:100%;padding:5px;line-height:25px;margin-bottom:20px;border: 1px solid #d1d1d1;border-radius:5px;background-color:rgba(244,244,244,9);}
        #vcode{width:60%;}
        .code-block .code-img{float:right;top:10px;height:28px;border:1px solid #d1d1d1;cursor:pointer;}
        .btn-block{position:relative;height:35px;}
        .btn-block .btn{width:100%;line-height:35px;font-size:14px;cursor:pointer; border:none;border-radius:5px;background-color:#f9a605;color:#fff;}

    </style>
    <script type="text/javascript" src="common/jquery.min.js"></script>
    <script type="text/javascript">
        function imageClick() {
        	$.ajax({
        		url: 'validateCode.do?t='+new Date().getTime(),
        		dataType: 'json',
        		type: 'POST',
        		success: function(data) {
        			$("#codeImg").attr('src', 'data:image/png;base64,'+data.image)
        			console.log("data" + data.image);
        		}
        	});
        }
        function btnSubmit() {
        	var $tips = $("#tips");
        	var username = $("#username").val();
        	if(username == '') {
        		$tips.text("用户名不可为空！");
        		$tips.show();
        		return;
        	}
        	var password = $("#password").val();
        	if(password == '') {
                $tips.text("密码不可为空！");
                $tips.show();
                return;
            }
        	var vcode = $("#vcode").val();
        	if(vcode == '') {
                $tips.text("验证码不可为空！");
                $tips.show();
                return;
            }
        	$("#loginForm").submit();
        }
        
        $(function() {
        	imageClick();
        })
    </script>
</head>
<body>
<div class="login-block">
    <div class="login">
        <div class="header">用户登陆</div>
        <div id="tips" class="tips">${errorMsg}</div>
        <div class="login-form">
            <form id="loginForm" autocomplete="off" name="loginform" action="index.do" method="post">
                <div class="login-list">
                    <input id="username" name="username" placeholder="用户名" value="${username}"/>
                    <input id="password" name="password" type="password" placeholder="密码" value="${password}"/>
                    <div class="code-block">
                        <input id="vcode" name="vcode" placeholder="验证码"  value="${vcode}"/>
                        <img id="codeImg" class="code-img" src="#" onclick="imageClick()">
                    </div>
                </div>
                <div class="btn-block">
                    <button type="button" class="btn" onclick="btnSubmit()">登陆</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>